<!-- 工作台页 -->
<template>
  <el-row :gutter="10">
    <!-- 主体页面左侧 -->
    <el-col :span="18">
      <el-row :gutter="10">
        <el-col :span="5">
          <!-- 用户卡片 -->
          <el-card style="height: 38vh">
            <template #header >
              <div style="text-align: center; margin: 0;">
                <el-avatar src="" style="width: 120px; height: 120px">
                  <img src="../../../public/imgs/img.png"
                       height="970" width="1000"/>
                </el-avatar>
              </div>

            </template>
            <div>
              <div style="font-size: 18px; text-align: center">欢迎来到工作台</div>
              <br>
              <span style="display: block; margin: 8px 0 8px 35px">员工姓名： {{ user.username }}</span>
              <span style="display: block; margin: 8px 0 8px 35px">部门： {{user.department}}</span>
              <span style="display: block; margin: 8px 0 8px 35px">职级： {{user.level}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <!-- 考勤卡片 -->
          <el-card style="height: 38vh">
            <template #header >
              <div style="font-size: 25px; font-weight: bold; text-align: center">本月考勤</div>
            </template>
            <el-table :data="attendanceArr1">
                <el-table-column prop="normal" label="正常天数" align="center"/>
                <el-table-column prop="beLate" label="迟到天数" align="center"/>
                <el-table-column prop="leaveEarly" label="早退天数" align="center"/>
            </el-table>
            <br>
            <br>
            <br>
            <el-table :data="attendanceArr2">
              <el-table-column prop="vacate" label="请假天数" align="center"/>
              <el-table-column prop="lackOfCard" label="缺卡天数" align="center"/>
              <el-table-column prop="absenteeism" label="旷工天数" align="center"/>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="11">
          <!-- 应用跳转卡片 -->
          <el-card style="height: 38vh">
            <template #header>
              <div style="font-size: 25px; font-weight: bold; text-align: center">常用应用</div>
            </template>
            <el-row :gutter="10" style="height: 13vh; align-items: center; text-align: center; margin-bottom: 10px">
              <el-col :span="6"  @click="handleClick('/LeaveApplication')" style="margin-right: 10px; padding-left:20px;">
                <img src="../../../public/processImg/leave.png" height="85" style="width: 80%"/>
              </el-col>
              <el-col :span="6" @click="handleClick('/regularApplication')">
                <img src="../../../public/processImg/regular.png" height="85" style="width: 80%"/>
              </el-col>
              <el-col :span="5" @click="handleClick('/EmployeeApplication')">
                <img src="../../../public/processImg/entry.png" height="85" style="width: 80%"/>
              </el-col>
              <el-col :span="6" @click="handleClick('/MeetingRoom')">
                <img src="../../../public/processImg/meetingRoom.png" height="85" style="width: 80%"/>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="height: 13vh; align-items: center; text-align: center">
              <el-col :span="6" @click="handleClick('/EquipmentApplication')">
                <img src="../../../public/processImg/item.png" height="85" style="width: 80%; margin-left: 8px"/>
              </el-col>
              <el-col :span="6" @click="handleClick('/ReimbursementApplication')">
                <img src="../../../public/processImg/reimbursement.png" height="85" style="width: 80%; margin-left: 12px"/>
              </el-col>
              <el-col :span="6" @click="handleClick('/Invoice')">
                <img src="../../../public/processImg/invoice.png" height="85" style="width: 80%; margin-left: 8px"/>
              </el-col>
              <el-col :span="5" @click="handleClick('/PaymentApplication')">
                <img src="../../../public/processImg/purchase.png" height="85" style="width: 80%"/>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
        <!-- 流程卡片 -->
        <el-card style="margin-top: 10px; height: 45vh">
          <el-menu :default-active="'1'" mode="horizontal" @select="handleSelect" v-model="selectedIndex">
            <el-menu-item index="1">我发起的</el-menu-item>
            <el-menu-item index="2">我处理的</el-menu-item>
          </el-menu>
          <div>
          <el-table :data="applicationArr">
            <el-table-column prop="userName" label="申请人" align="center"/>
            <el-table-column prop="createTime" label="申请时间" align="center"/>
            <el-table-column prop="type" label="流程类型" align="center"/>
            <el-table-column prop="department" label="所属部门" align="center"/>
            <el-table-column prop="auditUserName" label="当前审批人" align="center"/>
            <el-table-column prop="status" label="审批状态" align="center"/>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button link type="primary" size="small"
                           @click="deleteApplication(scope.row.userName, scope.row.createTime)"
                >
                  撤回
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        </el-card>
        </el-col>
      </el-row>
    </el-col>
    <!-- 主体页面右侧 -->
    <el-col :span="6">
      <!-- 备忘日历卡片 -->
      <el-row>
        <el-col :span="24">
          <el-card style="height: calc(48vh + 11px)">
            <template #header>
              <div style="font-size: 25px; font-weight: bold; text-align: center">我的日程</div>
            </template>
            <el-calendar style="text-align: center" v-model="dateValue">
              <template #date-cell="{data}">
                <div style="height: 100vh"
                     @mousedown="getMemoForDay(data.day)"
                     :class="data.isSelected ? 'is-selected' : ''"
                >
                  {{ data.day.split('-').slice(2).join('-') }}
                </div>
              </template>
            </el-calendar>
          </el-card>
        </el-col>
      </el-row>
      <!-- 备忘事项卡片 -->
      <el-row>
        <el-col :span="24">
          <el-card style="height: calc(35vh)">
            <ul>
              <li v-for="(item, index) in selectedMemoArr" :key="index">
                <span>{{item.dayTime}}<br>{{item.content}}</span>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>


</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import {useRouter} from "vue-router";

//获取登录用户信息
const user = ref(getUser());

//定义数组保存考勤列表数据
const attendanceArr = [];
const attendanceArr1 = ref([]);
const attendanceArr2 = ref([]);
//定义搜索出勤情况的方法
const searchAttendanceForm = ref({userId:user.value.id})
let data = qs.stringify(searchAttendanceForm.value);
const searchAttendance = ()=>{
  axios.get(BASE_URL+'/v1/attendance/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      attendanceArr.value = response.data.data;
      attendanceArr1.value = attendanceArr.value.slice(0,3);
      attendanceArr2.value = attendanceArr.value.slice(-3);
    }
    else{
      ElMessage.error('查询正常、迟到、早退统计信息失败')
    }
  })
}
onMounted(() => {
  searchAttendance();
})


//定义数组保存流程数据
const applicationArr = ref([]);
//定义变量保存选中菜单的索引
const selectedIndex = ref('1');
//定义选中菜单的方法
const handleSelect = (index) => {
  selectedIndex.value = index;
  // 根据index加载相应的数据到flowArr
  if (index === '1') {
    selectInitiate();
  } else if (index === '2') {
    selectAudit();
  }
}
const selectInitiate = () => {
  axios.get(BASE_URL+'/v1/application/selectInitiate?userId='+user.value.id).then((response)=>{
    if(response.data.code == 2000){
      applicationArr.value = response.data.data;
    }
    else{
      ElMessage.error('查询我发起的流程失败')
    }
  })
}
const selectAudit = () => {
  axios.get(BASE_URL+'/v1/application/selectAudit?auditUserId='+user.value.id).then((response)=>{
    if(response.data.code == 2000){
      applicationArr.value = response.data.data;
    }
    else{
      ElMessage.error('查询我处理的流程失败')
    }
  })
}
onMounted(() => {
  selectInitiate();
})

//定义删除字典的方法
const deleteApplication = (userName, createTime) => {
  let data = {
    userName: userName,
    createTime: createTime
  }
  console.log(data)
  if(confirm('您确定要撤回该流程吗？')){
    axios.post(BASE_URL+'/v1/application/delete/',data).then((response)=>{
      if (response.data.code === 2000) {
        ElMessage.success('撤回成功！');
        selectInitiate();
      } else {
        ElMessage.error(response.data.msg)
      }
    })
  }
}

//定义变量保存日历显示时间
const dateValue = ref(new Date());
//从数据库中取出的备忘录事件数组
const memoArr = ref([]);
//定义数组保存选中当天备忘录信息
const selectedMemoArr = ref([]);
//加载日历页面
const loadCalender = ()=>{
  axios.get(BASE_URL+'/v1/calendar/select?userId='+getUser().id)
      .then((response)=>{
        if(response.data.code == 2000){
          memoArr.value= response.data.data;
        }
        else{
          ElMessage.error('日历查询失败')
        }
      })
}
//直接加载当天的所有备忘录信息
const loadMemoForToday = () => {
  selectedMemoArr.value = [];
  let selectMsg = {userId: getUser().id, dates:formattedDate};
  let data = qs.stringify(selectMsg);
  axios.get(BASE_URL+'/v1/calendar/select/datas?'+data)
      .then((response)=>{
        if(response.data.code == 2000){
          selectedMemoArr.value = response.data.data;
        }
        else{
          ElMessage.error('查询当天备忘信息失败')
        }
      })
}
//获取一天的所有备忘信息
const getMemoForDay = (day) => {
  selectedMemoArr.value = [];
  //filter，根据条件筛选出信息，存放到新数组中，并将新数组返回
  selectedMemoArr.value = memoArr.value.filter(memo => memo.dayTime === day);
  return selectedMemoArr.value;
}

let date = new Date();
let formattedDate = `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;

onMounted(()=>{
  loadCalender();
  loadMemoForToday();
})


const router = useRouter();

const handleClick = (path) => {
  router.push(path);
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
</script>

<style>
.el-calendar {
  --el-calendar-cell-width: 36px;
}

.is-selected {
  color: #1989fa;
}
</style>